<template>
	<StickyHeader />
	<div class="list-page" :style='{}'>
        <div class="breadcrumb-wrapper" style="width: 100%;">
            <div class="bread_view">
                <el-breadcrumb separator="" class="breadcrumb">
                    <el-breadcrumb-item class="second_breadcrumb" v-for="(item,index) in breadList" :key="index"></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="back_view" v-if="centerType">
                <el-button class="back_btn" @click="backClick" type="primary">返回</el-button>
            </div>
        </div>
		<el-form :inline="true" :model="searchQuery" class="list_search">
			<div class="search_view">
				<div class="search_label">
					导师姓名：
				</div>
				<div class="search_box">
					<el-input class="search_inp" v-model="searchQuery.daoshixingming" placeholder="导师姓名"
						clearable>
					</el-input>
				</div>
			</div>
			<div class="search_view">
				<div class="search_label">
					项目分类：
				</div>
				<div class="search_box">
					<el-select
						class="search_sel"
						clearable
						v-model="searchQuery.xiangmufenlei" 
						placeholder="项目分类"
						>
						<el-option v-for="item in xiangmufenleiLists" :label="item" :value="item"></el-option>
					</el-select>
				</div>
			</div>
			<div class="search_btn_view">
				<el-button class="search_btn" type="primary" @click="searchClick">
					<el-icon><Search /></el-icon> 搜索
				</el-button>
				<el-button class="add_btn" type="success" v-if="btnAuth('daoshi','新增')" @click="addClick">新增</el-button>
			</div>
		</el-form>
		<div class="page_list">
			<div class="data_box">
				<el-table
					:data="list"
					style="width: 100%"
					@row-click="(row) => detailClick(row.id)"
					:header-cell-style="{
						background: '#f5f7fa',
						color: '#606266',
						fontWeight: 'bold',
						textAlign: 'center'
					}"
					:cell-style="{textAlign: 'center'}"
				>
					<el-table-column label="导师姓名" align="center">
						<template #default="scope">
							<div class="mentor-info">
								<el-avatar 
									:size="40" 
									:src="scope.row.touxiang ? 
										(scope.row.touxiang.substr(0,4)=='http' ? scope.row.touxiang : $config.url + scope.row.touxiang.split(',')[0]) 
										: ''" 
									@click.stop="preViewClick(scope.row.touxiang.substr(0,4)=='http' ? scope.row.touxiang : $config.url + scope.row.touxiang.split(',')[0])">
								</el-avatar>
								<span class="mentor-name">{{ scope.row.daoshixingming }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="leixing" label="类型" align="center"></el-table-column>
					<el-table-column prop="zhicheng" label="职称" align="center"></el-table-column>
					<el-table-column prop="chengshi" label="城市" align="center">
						<template #default="scope">
							<span>{{ scope.row.chengshi || '暂无' }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="lingyuzhuanzhang" label="领域专长" align="center"></el-table-column>
					<el-table-column prop="xiangmufenlei" label="项目类型" align="center"></el-table-column>
				</el-table>
				
				<el-pagination
					background 
					:layout="layouts.join(',')"
					:total="total" 
					:page-size="listQuery.limit"
                    v-model:current-page="listQuery.page"
					prev-text="上一页"
					next-text="下一页"
					:hide-on-single-page="false"
					:style='{}'
					@size-change="sizeChange"
					@current-change="currentChange"/>
			</div>
		</div>
		<el-dialog v-model="preViewVisible" width="800px" top="5vh" destroy-on-close align-center>
			<div style="padding: 20px; display: flex; justify-content: center; align-items: center; height: 100%;">
				<img :src="preViewUrl" style="width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);" alt="">
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick,
        computed,
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
    import {
        useStore
    } from 'vuex';
    import StickyHeader from '@/components/StickyHeader.vue'
    const store = useStore()
    const user = computed(()=>store.getters['user/session'])
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const router = useRouter()
	const route = useRoute()
	//基础信息
	const tableName = 'daoshi'
	const formName = '导师'
	//基础信息
	const breadList = ref([{
		name: formName
	}])
	const list = ref([])
	const listQuery = ref({
		page: 1,
		limit: Number(12)
	})
	const total = ref(0)
	const listLoading = ref(false)
	//权限验证
	const btnAuth = (e,a)=>{
		if(centerType.value){
			return context?.$toolUtil.isBackAuth(e,a)
		}else{
			return context?.$toolUtil.isAuth(e,a)
		}
	}
	const addClick = () => {
		router.push('/index/daoshiAdd')
	}
	//判断是否从个人中心跳转
	const centerType = ref(false)
	//返回
	const backClick = () => {
		router.push(`/index/${context?.$toolUtil.storageGet('frontSessionTable')}Center`)
	}
	//搜索
	const searchQuery = ref({})
	//下拉列表
	const xiangmufenleiLists = ref([])
	const getxiangmufenleiLists = () => {
		context?.$http({
			url: 'option/xiangmufenlei/xiangmufenlei',
			method:'get'
		}).then(res=>{
			xiangmufenleiLists.value = res.data.data
		})
	}
	getxiangmufenleiLists()
	const searchClick = () => {
		listQuery.value.page = 1
		getList()
	}
	//分页
	const layouts = ref(["total","prev","pager","next","sizes","jumper"])
	const sizeChange = (size) => {
		listQuery.value.limit = size
		getList()
	}
	const currentChange = (page) => {
		listQuery.value.page = page
		getList()
	}
	//分页
	//列表
	const getList = () => {
		listLoading.value = true
		let params = JSON.parse(JSON.stringify(listQuery.value))
		if(searchQuery.value.daoshixingming&&searchQuery.value.daoshixingming!=''){
			params.daoshixingming = '%' + searchQuery.value.daoshixingming + '%'
		}
		if(searchQuery.value.xiangmufenlei&&searchQuery.value.xiangmufenlei!=''){
			params.xiangmufenlei = searchQuery.value.xiangmufenlei
		}
		context?.$http({
			url: `${tableName}/${centerType.value?'page':'list'}`,
			method: 'get',
			params: params
		}).then(res => {
			listLoading.value = false
			list.value = res.data.data.list
			total.value = Number(res.data.data.total)
		})
	}
	const detailClick = (id) => {
		router.push(`${tableName}Detail?id=` + id + (centerType.value?'&&centerType=1':''))
	}
	//下载文件
	const download = (file) =>{
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		const a = document.createElement('a');
		a.style.display = 'none';
		a.setAttribute('target', '_blank');
		file && a.setAttribute('download', file);
		a.href = context?.$config.url + file;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
	}
	// 查看大图
	const preViewUrl = ref('')
	const preViewVisible = ref(false)
	const preViewClick = (url) =>{
		preViewUrl.value = url
		preViewVisible.value = true
	}
	const init = async() => {
		if(route.query.centerType){
			centerType.value = true
		}
		getList()
	}
	init()
</script>
<style lang="scss" scoped>
	// 返回盒子
	.back_view {
		// 返回按钮
		.back_btn {
		}
		// 返回按钮-悬浮
		.back_btn:hover {
		}
	}
	
	// 导师信息样式
	.mentor-info {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		
		.mentor-name {
			font-weight: bold;
			color: #303133;
		}
	}
	
	// 表格行鼠标悬停样式
	:deep(.el-table__header),
	:deep(.el-table__row) {
		font-size: 20px;
	}
	:deep(.el-table__cell) {
		font-size: 20px;
	}
	:deep(.el-table__header .el-table__cell) {
		font-size: 21px;
		font-weight: bold;
	}
	:deep(.el-table__body .el-table__cell) {
		font-size: 20px;
	}
	// 调整表格图片尺寸更大
	:deep(.el-avatar), :deep(.el-image) {
		width: 100px !important;
		height: 100px !important;
	}
	
	.bread_view {
		:deep(.breadcrumb) {
			.el-breadcrumb__separator {
			}
			.first_breadcrumb {
				.el-breadcrumb__inner {
				}
			}
			.second_breadcrumb {
				.el-breadcrumb__inner {
				}
			}
		}
	}

	//搜索
	.list_search {
		min-height: 60px;
		font-size: 22px;
		.search_view {
			.search_label {
				font-size: 22px;
				font-weight: bold;
				margin-right: 8px;
			}
			.search_box {
				:deep(.search_inp), :deep(.el-input__wrapper), :deep(.el-input__inner) {
					font-size: 22px !important;
					height: 48px !important;
					min-width: 260px;
					padding: 0 16px;
				}
				:deep(.search_sel), :deep(.el-select__wrapper), :deep(.el-select__inner) {
					font-size: 22px !important;
					height: 48px !important;
					min-width: 220px;
					padding: 0 16px;
				}
			}
		}
		.search_btn_view {
			.search_btn, .add_btn {
				font-size: 22px;
				height: 48px;
				padding: 0 32px;
				margin-left: 12px;
			}
			:deep(.search_btn span), :deep(.add_btn span) {
				font-size: 20px !important;
				font-weight: 400;
				line-height: 48px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				vertical-align: middle;
				max-height: 48px;
			}
			:deep(.search_btn .el-icon),
			:deep(.search_btn .el-icon svg) {
				font-size: 20px !important;
				width: 20px !important;
				height: 20px !important;
				vertical-align: middle;
				margin-right: 2px;
			}
		}
	}

	// 分页器
	.el-pagination {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		
		// 总页码
		:deep(.el-pagination__total) {
		}
		// 上一页
		:deep(.btn-prev) {
		}
		// 下一页
		:deep(.btn-next) {
		}
		// 上一页禁用
		:deep(.btn-prev:disabled) {
		}
		// 下一页禁用
		:deep(.btn-next:disabled) {
		}
		// 页码
		:deep(.el-pager) {
			// 数字
			.number {
			}
			// 数字悬浮
			.number:hover {
			}
			// 选中
			.number.is-active {
			}
		}
		// sizes
		:deep(.el-pagination__sizes) {
			.el-select {
				//去掉默认样式
				.select-trigger{
					height: 100%;
					.el-input{
						height: 100%;
						.is-focus {
							box-shadow: none !important;
						}
					}
				}
			}
		}
		// 跳页
		:deep(.el-pagination__jump) {
			// 输入框
			.el-input {
				.is-focus {
					box-shadow: none !important;
				}
			}
		}
	}
	.list-page {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 40px;
  font-size: 20px;
  background: #fff;
}
</style>
